<template>
  <div class="chart_center1">
    <div class="chart_center1-title">各地编制情况</div>
    <div id="chart_center1" />
  </div>
</template>

<script>
const echarts = require('echarts')
import Sever from '@/api/selfApi'
export default {
  props: {
    dep_code: {
      type: String,
      default: '450000-00-0000',
      require: true
    }
  },
  data() {
    return {
      option: {
        title: {
          text: '',
          subtext: ''
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          textStyle: {
            color: '#fff'
          },
          icon: 'circle',
          left: 'center',
          top: '1',

          show: true
        },

        grid: {
          top: '15%',
          left: '1%',
          right: '1%',
          bottom: '0.1%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          splitLine: {
            show: false
          },
          axisLabel: {
            interval: 0,
            rotate: 40,
            textStyle: {
              color: '#7ec7ff'
            }
          },
          data: [
            '南宁市',
            '柳州市',
            '桂林市',
            '梧州市',
            '北海市',
            '防城港市',
            '钦州市',
            '贵港市',
            '玉林市',
            '百色市',
            '贺州市',
            '河池市',
            '来宾市',
            '崇左市'
          ]
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#7ec7ff'
            }
          }
        },
        series: [
          {
            name: '编制数',
            type: 'bar',
            barWidth: 15,
            stack: '数量',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            itemStyle: {
              normal: {
                // 颜色渐变
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    // color: 'rgba(0, 151, 251, 1)'
                    color: 'rgba(0,186,255, 1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(0,186,255, 0.2)'
                  }
                ])
              }
            }
          },

          {
            name: '空编数',
            type: 'bar',
            barWidth: 15,
            stack: '数量',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            itemStyle: {
              normal: {
                // 颜色渐变
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(48, 236, 166, 1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(0, 34, 66, 0.2)'
                  }
                ])
              }
            }
          },
          {
            name: '待分配数',
            type: 'bar',
            barWidth: 15,
            stack: '数量',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            itemStyle: {
              normal: {
                // 颜色渐变
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#f5804d'
                  },
                  {
                    offset: 1,
                    color: '#fccb05'
                  }
                ])
              }
            }
          }
        ]
      },
      depcode: '450000-00-0000'
    }
  },

  watch: {
    dep_code(newValue, oldValue) {
      if (newValue) {
        (this.depcode = newValue), this.getGdbzqk()
      }
    }
  },
  destroyed() {
    window.onresize = null
  },
  mounted() {
    // this.drawPie()
    // this.getGdbzqk()
  },
  methods: {
    async getGdbzqk() {
      try {
        // 请求后台接口
        const res = await Sever.analyse.getGdbzqk({
          // 请求参数
          dep_code: this.depcode
        })
        if (res.length == 0) {
          // 初始化data中的数值
          Object.assign(this.$data, this.$options.data())
        } else {
          this.option.xAxis.data = res[0]
          this.option.series[0].data = res[1]
          this.option.series[1].data = res[2]
          this.option.series[2].data = res[3]
        }
        this.drawPie()
      } catch (error) {
        console.log(error)
        Object.assign(this.$data, this.$options.data())
        this.drawPie()
      }
    },

    drawPie() {
      const myChartPiechart_center1 = echarts.init(
        document.getElementById('chart_center1')
      )
      myChartPiechart_center1.clear()

      myChartPiechart_center1.setOption(this.option)
      // -----------------------------------------------------------------
      // 响应式变化
      window.addEventListener(
        'resize',
        () => myChartPiechart_center1.resize(),
        false
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.chart_center1 {
  width: 100%;
  height: 32%;
  box-sizing: border-box;
  margin-bottom: 20px;
  // background-color: rgba(255, 255, 255, 0.03);
  border-top: 2px solid rgba(1, 153, 209, 0.5);
  display: flex;
  flex-direction: column;

  .chart_center1-title {
    font-weight: bold;
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 18px;
    justify-content: center;
  }

  #chart_center1 {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
